<template>
  <div>
    <el-card>
      <el-header class="headerStyle">
        <el-input
          v-model="input"
          class="inputStyle"
          placeholder="请输入套餐名称"
          clearable
          @keyup.enter.native="ComboQuery"
        >
          <li 
            slot="prefix" 
            class="el-input__icon el-icon-search" 
            @click="ComboQuery"
          />
        </el-input>
        <el-button 
          type="text" 
          size="small" 
          class="button1Style" 
          @click="deleteBatch('批量删除',null)"
        >批量删除</el-button>
        <el-button 
          type="text" 
          size="small" 
          class="button2Style" 
          style="color:black" 
          @click="statusBatch('1')"
        >批量启售<span class="splic"></span></el-button>
        <el-button 
          type="text" 
          size="small" 
          class="button3Style" 
          style="color:#FF0000" 
          @click="statusBatch('0')"
        >批量停售<span class="splic"></span></el-button>
        <el-button 
          round 
          class="buttonStyle" 
          @click="addCombo()"
        >+新建套餐</el-button>
      </el-header>
      <el-main>
        <el-table
          ref="multipleTable"
          :data="comboData"
          tooltip-effect="dark"
          style="width: 100%"
          class="tableStyle"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="25"
          />
          <el-table-column
            prop="name"
            label="套餐名称"
          />
          <el-table-column
            prop="image"
            label="图片"
            class="imgStyle"
          >
            <template slot-scope="{ row }">
              <el-image
                :src="getUrl(row.image)"
                style="width: 40px; height: 40px"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryName"
            label="套餐分类"
          />
          <el-table-column
            prop="price"
            label="售价"
          >
            <template slot-scope="scope">
              <span>￥{{ scope.row.price/100 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="售卖状态"
          >
            <template slot-scope="scope">
              <span>{{scope.row.status === 0 ? '已售':'启售'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="最后操作时间"
          />
          <el-table-column
            prop="click"
            label="操作"
            class="lastStyle"
          >
            <template slot-scope="scope">
              <el-button 
                type="text" 
                size="small" 
                @click="editCombo(scope.row.id)"
              >修改</el-button>
              <el-button 
                type="text" 
                size="small" 
                style="color:black" 
                @click="statusBatch(scope.row)"
              >
                {{ scope.row.status === 1 ? '停售' : '启售' }}
              </el-button>
              <el-button 
                type="text" 
                size="small" 
                style="color:#FF0000" 
                @click="deleteBatch('删除',scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="pageStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { getSetmealPage,setmealStatusByStatus,deleteSetmeal,editSetmeales } from '@/api/combo'
export default {
  data() {
    return {
      comboData: [],
      page: 1,
      pageSize: 10,
      input: '',
      total: 0,
      comboState:'',
      id: '',
      action:'',
      multipleSelection: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const changeData = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.input ? this.input : undefined
      }
      await getSetmealPage(changeData).then(res => {
        console.log(res)
        this.comboData = res.data.records || []
        this.total = res.data.total
      }).catch(err => {
        this.$message.error('请求出错了:' + err)
      })
    },
    handleSelectionChange(val) {
      let arr = []
      val.map((n) => {
        arr.push(n.id)
      })
      this.multipleSelection = arr
    },
    ComboQuery() {
      this.page = 1;
      this.fetchData();
    },
    getUrl (image) {
      return `${process.env.VUE_APP_BASE_API}/common/download?name=${image}`;
    },
    addCombo() {
      this.$router.push({
        path: '/editCombo',
        query: {
          action:'ADD'
        }
      })
    },
    editCombo(id) {
      this.$router.push({
        path: '/editCombo',
        query: {
          action: 'EDIT',
          id,
        }
      })
    },
    statusBatch(row) {
      let params = {}
      if(typeof row === 'string'){
        if (this.multipleSelection.length == 0) {
          return this.$message.error('请勾选所需操作的菜品')
        }
        params.ids = this.multipleSelection.join(',')
        params.status = Number(row)
      } else {
        params.id = row.id
        params.status = row.status ? 0 : 1
      }
      this.$confirm("是否确认改变该套餐的销售状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",  
      }).then(() => {
        console.log(params)
        setmealStatusByStatus(params).then(res => {
          if (res.code === 1) {
            this.$message.success('套餐销售状态更改成功！')
            this.fetchData()
          } else {
            this.$message.error(res.msg || '操作失败')
          }
        })
      }).catch((err) => {
        this.$message.error("请求出错了：" + err);
      });
    },
    deleteBatch(status, id) {
      if(status === '批量删除' && id === null){
        if (this.multipleSelection.length === 0) {
          return this.$message.error('请勾选所需删除的套餐')
        }
      }
      this.$confirm('是否确认永久删除该套餐?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSetmeal(status === '批量删除' ? this.multipleSelection.join(',') : id).then(res => {
          console.log(res)
          if (res.code === 1) {
            this.$message.success('删除成功！');
            this.ComboQuery();
          } else {
            this.$message.error(res.msg || '操作失败')
          }
        }).catch(err => {
          this.$message.error('请求出错' + err)
        })
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.page = val
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.headerStyle{
  position:relative;
  top:0;
  left:0;
  .inputStyle{
    width:200px;
    margin-top:20px;
    .el-input__icon{
      font-size:18px;
    }
  }
  .button1Style{
    position:absolute;
    right:180px;
    top:25px;
    font-size:18px;
    height: 15px;
  }
  .button2Style{
    position:absolute;
    right:280px;
    top:25px;
    font-size:18px;
    width: 90px;
    height: 15px;
    .splic{
      margin-left:20px;
      width: 1px;
      height: 10px;
      border:1px solid rgba(0,0,0, .1);
    }
  }
  .button3Style{
    position:absolute;
    right:400px;
    top:25px;
    width: 90px;
    height: 15px;
    font-size:18px;
    .splic{
      margin-left:20px;
      width: 1px;
      height: 10px;
      border:1px solid rgba(0,0,0, .1);
    }
  }
  .buttonStyle{
    position:absolute;
    border:none;
    right:20px;
    top:20px;
    width: 140px;
    height: 45px;
    background-color:pink;
  }
  .buttonStyle:hover{
    color:white;
  }
}
.imgStyle{
    width: 50px;
    height: 50px;
}
.pageStyle{
    margin:0 auto;
    padding-top:80px;
    padding-bottom:20px;
    text-align: center;
}
</style>
